import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AppBarTabDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var choices = <Choice>[
      Choice('自驾', Icons.directions_car),
      Choice('自行车', Icons.directions_bike),
      Choice('乘船', Icons.directions_boat),
      Choice('公交车', Icons.directions_bus),
      Choice('火车', Icons.directions_railway),
      Choice('步行', Icons.directions_walk),
    ];

    return DefaultTabController(
      length: choices.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Tab控件示例'),
          bottom: TabBar(
            tabs: choices
                .map((Choice choice) => Tab(
                      text: choice.title,
                      icon: Icon(choice.icon),
                    ))
                .toList(),
          ),
        ),
        //底部内容
        body: TabBarView(
          children: choices
              .map((Choice choice) => Padding(
                    padding: EdgeInsets.all(16.0),
                    child: Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        //水品居中
                        crossAxisAlignment: CrossAxisAlignment.center,
                        //垂直居中
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            choice.icon,
                            size: 128.0,
                            color: Theme.of(context).textTheme.headline4?.color,
                          ),
                          Text(
                            choice.title,
                            style: Theme.of(context).textTheme.headline4,
                          ),
                        ],
                      ),
                    ),
                  ))
              .toList(),
        ),
      ),
    );
  }
}

class Choice {
  final String title;
  final IconData icon;

  Choice(this.title, this.icon);
}
